@include('admin.layout.css')
@include('admin.layout.js')




<div class="layui-form" lay-filter="layuiadmin-app-form-list" id="layuiadmin-app-form-list" style="padding: 20px 30px 0 0;">




        <div class="layui-form-item">
            <label for="type" class="layui-form-label">
                上级地区
            </label>
            <div class="layui-input-inline">
                <select id="" name="" lay-filter="selectChange">
                    <option value="">请选择</option>
                    @foreach($areas as $value)
                        <option value="{{$value['area_id']}}">{{$value['name']}}</option>
                    @endforeach
                </select>
            </div>
            <div class="layui-input-inline">

                <select id="area_id" name="" lay-filter="selectChange1">
                </select>
            </div>


            <div class="layui-input-inline">

                <select id="quyu_id" name="parentid" lay-filter="selectChange2">
                </select>
            </div>
        </div>


    <div class="layui-form-item">
        <label class="layui-form-label">乡镇</label>
        <div class="layui-input-inline">
            <input type="text"  name="name"  placeholder="请输入 乡镇" autocomplete="off" class="layui-input" >
        </div>
    </div>



    <div class="layui-form-item layui-hide">
        <input type="button" lay-submit lay-filter="submit" id="submit" value="确认">
        <input type="button" lay-submit lay-filter="layuiadmin-app-form-edit" id="layuiadmin-app-form-edit" value="取消">
    </div>

</div>
<script>


    layui.use(['laydate','form'], function() {
        let form = layui.form;




        form.on('select(selectChange)', function(data){
            // 获取被选中的值
            var value = data.value;
            // 在这里执行你需要的操作...
            HttpUtils.get("{{route('admin.areas.childs')}}?parentid="+value,{},function (resultData){
                $("#area_id").empty();
                $("#quyu_id").empty();

                $("#area_id").append("<option value=''>请选择</option>")
                for(let i = 0;i<resultData['data'].length;i++){
                    console.log(resultData['data'][i]['name'])
                    $("#area_id").append("<option value='"+resultData['data'][i]['area_id']+"'>"+resultData['data'][i]['name']+"</options>");
                }
                form.render()
            });

        });

        form.on('select(selectChange1)', function(data){
            // 获取被选中的值
            var value = data.value;
            // 在这里执行你需要的操作...
            HttpUtils.get("{{route('admin.areas.childs')}}?parentid="+value,{},function (resultData){
                $("#quyu_id").empty();

                $("#quyu_id").append("<option value=''>请选择</option>")
                for(let i = 0;i<resultData['data'].length;i++){
                    console.log(resultData['data'][i]['name'])
                    $("#quyu_id").append("<option value='"+resultData['data'][i]['area_id']+"'>"+resultData['data'][i]['name']+"</options>");
                }
                form.render()
            });
        });

        form.on('submit(submit)', function(data){
            Api.add("{{route('admin.areas.add')}}",data.field,function(res){
                if (res.code !== 200){
                    Utils.errorToast(res.msg);
                    return;
                }
            });
        });


    });
</script>
